<template>
	<view class="main" :style="'top:'+(-demo.height-demo.top-10)+'px'">
		<view :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="addWordExp">
			<view class="addWordExp_list">
				<view class="addWordExp_list_tit"><text>*</text><text>项目名称</text></view>
				<input type="text" value="" v-model="dataMain.project" placeholder="请输入项目名称"
					placeholder-style="color:#d4d6e1" />
			</view>
			<view class="addWordExp_list">
				<view class="addWordExp_list_tit"><text>*</text><text>所在公司</text></view>
				<input type="text" value="" v-model="dataMain.companyName" placeholder="请输入所在公司"
					placeholder-style="color:#d4d6e1" />
			</view>

			<view class="addWordExp_list">
				<view class="addWordExp_list_tit"><text>*</text><text>参与角色</text></view>
				<input type="text" value="" v-model="dataMain.role" placeholder="请输入参与角色"
					placeholder-style="color:#d4d6e1" />
			</view>
			<view class="addWordExp_list">
				<view class="addWordExp_list_time">
					<view class="dis_flex addWordExp_list_tit">
						<view><text>*</text><text>工程时间</text></view>
					</view>
					<view class="dis_flex addWordExp_list_data">
						<view>
							<picker mode="date" :value="dataMain.endTime" :start="startDate" :end="endDate"
								@change="bindDateChangeStr">
								<view class="uni-input commonColor" v-if="dataMain.startTime==''">开工时间</view>
								<view class="uni-input" v-if="dataMain.startTime!='' && dataMain.startTime!=null">
									{{dataMain.startTime}}
								</view>
							</picker>
						</view>
						<view style="width: 100rpx;">
							--
						</view>
						<view>
							<picker mode="date" :value="dataMain.endTime" :start="startDate" :end="endDate"
								@change="bindDateChangeEnd">
								<view class="uni-input commonColor"
									v-if="dataMain.endTime=='' || dataMain.endTime==null">竣工时间</view>
								<view class="uni-input" v-if="dataMain.endTime!='' && dataMain.endTime!=null">
									{{dataMain.endTime}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<view class="addWordExp_list">
				<view class="addWordExp_list_tit"><text style="opacity: 0;">*</text>项目分类</view>
				<view class="addWordExp_list_juese dis_flex">
					<picker @change="protecChange" :value="protectIndex" :range="protectClass" range-key="name">
						<view class="uni-input commonColor" v-if="dataMain.classification==''">请选择项目分类</view>
						<view v-show="0===1">{{dataMain.classification}}</view>
						<view class="uni-input" v-if="dataMain.classification!=''">
							{{protectClass[protectIndex].name}}
						</view>
					</picker>
					<image src="../../static/icon/youjiantou.png" mode=""></image>
				</view>
			</view>
			<view class="addWordExp_list" v-if="gyyt.length!=0">
				<view class="addWordExp_list_tit"><text style="opacity: 0;">*</text>工业用途</view>
				<view class="addWordExp_list_juese dis_flex">
					<picker @change="gyytChange" :value="gyytIndex" :range="gyyt" range-key="name">
						<view class="uni-input commonColor" v-if="dataMain.purpose==''">请选择工业用途</view>
						<view v-show="0===1">{{dataMain.purpose}}</view>
						<view class="uni-input" v-if="dataMain.purpose!=''">{{gyyt[gyytIndex].name}}</view>
					</picker>
					<image src="../../static/icon/youjiantou.png" mode=""></image>
				</view>
			</view>
			<view class="addWordExp_list" v-if="xmxz.length!=0">
				<view class="addWordExp_list_tit"><text style="opacity: 0;">*</text>建设性质</view>
				<view class="addWordExp_list_juese dis_flex">
					<picker @change="xmxzChange" :value="xmxzIndex" :range="xmxz" range-key="meaning">
						<view class="uni-input commonColor" v-if="dataMain.nature==''">请选择建设性质</view>
						<view v-show="0===1">{{dataMain.nature}}</view>
						<view class="uni-input" v-if="dataMain.nature!=''">{{xmxz[xmxzIndex].meaning}}</view>
					</picker>
					<image src="../../static/icon/youjiantou.png" mode=""></image>
				</view>
			</view>
			<view class="addWordExp_list text_list">
				<view class="addWordExp_list_tit">项目描述</view>
				<textarea value="" v-model="dataMain.remark" placeholder="请输入项目描述" placeholder-style="color:#d4d6e1" />
			</view>
			<view class="addWordExp_list_btn" @click="submit(dataMain)">
				保存
			</view>
			<view v-if="btnStatus!=false" class="addWordExp_list_btn del" @click="del(dataMain)">
				删除
			</view>
		</view>
	</view>
</template>
<script>
	import head1 from '../../common/head/head'
	import mypick from '../../components/mypick.vue'
	export default {
		components: {
			head1
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: '项目业绩',
				demo: {
					top: '',
					height: ''
				},
				nowTime: currentDate,
				dataMain: {
					careerId: '',
					careeId: '',
					project: '',
					remark: '',
					role: '',
					startTime: '',
					endTime: '',
					classification: '', //项目分类 
					purpose: '', //	工程用途
					companyName: '',
					nature: '' //	建设性质
				},
				btnStatus: false,
				time: '12:01',
				timeIndexStart: 0,
				timeIndexEnd: 0,
				joinIndex: 1,
				protectIndex: 0,
				xmxzIndex: 0,
				gyytIndex: 0,
				joinPlac: 0, //0 显示  1 隐藏
				protectPlac: 0, //0 显示  1 隐藏
				gyytPlac: 0, //0 显示  1 隐藏   工业用途
				xmxzPlac: 0, //0 显示  1 隐藏   项目性质
				protectClass: [], //项目分类
				gyyt: [], //工业用途
				xmxz: [], //建设性质
			}
		},
		onLoad(option) {
			let that = this
			// 获取建设性质下拉列表
			that.$myResquest.getDict({
				enumCode:'build'
			}).then(res=>{
				if(res.data.code==200){
					that.xmxz=res.data.data.build
				}
			})
			if (JSON.stringify(option) == '{}') {
				// 添加
			} else {
				setTimeout(function() {

					// 修改
					that.btnStatus = !that.btnStatus
					// this.timeIndexEnd == 1
					let dat = JSON.parse(decodeURIComponent(option.data))
				
					let getXiaList = uni.getStorageSync('getXiaLa')
					that.protectClass = getXiaList
					for (let i = 0; i < that.protectClass.length; i++) {
						// 编辑时判断当前回显是否有子集
						if (dat.classification == that.protectClass[i].code) {
							if (that.protectClass[i].children.length != 0) {
								that.gyyt = that.protectClass[i].children
								// 判断是否有建设性质
								// for (let j = 0; j < that.gyyt.length; j++) {
								// 	if (dat.purpose == that.gyyt[j].code) {
								// 		if (that.gyyt[j].children.length != 0) {
								// 			that.xmxz = that.gyyt[j].children
								// 		} else {
								// 			that.xmxz = ''
								// 		}
								// 	}
								// 	// if (that.gyyt[j].children.length != 0) {

								// 	// }
								// }
							} else {
								that.gyyt = ''
							}
						}
					}
					// 回显项目分类下拉框
					for (let i = 0; i < that.protectClass.length; i++) {
						if (that.protectClass[i].code == dat.classification) {
							that.protectIndex = i
						}
					}

					// 回显工业用途

					for (let i = 0; i < that.gyyt.length; i++) {

						if (that.gyyt[i].code == dat.purpose) {
							that.gyytIndex = i

						}
					}
					// 回显建设性质
					for (let i = 0; i < that.xmxz.length; i++) {
						if (that.xmxz[i].code == dat.nature) {
							that.xmxzIndex = i
						}
					}
					that.dataMain = dat
					that.dataMain.careeId = dat.careerId
				}, 100)
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			// 获取下拉
			this.getDictData()
		},
		methods: {
			del(data) {
				this.$myResquest.personRemove({
					msgId: data.careerId,
					type: 'career'
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "删除成功"
						})
						setTimeout(() => {
							// 获取页面栈
							let pages = getCurrentPages()
							// 获取上一页栈
							let prevPage = pages[pages.length - 2]
							prevPage.$vm.test()
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: '删除失败',
							icon: "none"
						})

					}
				})
			},
			getDictData() {
				this.$myResquest.getPurpose().then(res => {
					if (res.data.code == 200) {
						this.protectClass = res.data.data
						// 下拉选项存储到本地
						uni.setStorageSync('getXiaLa', res.data.data)
						for (let i = 0; i < this.protectClass.length; i++) {
							// 判断是否有工业用途
							if (this.protectClass[i].children.length != 0) {
								this.gyyt = this.protectClass[i].children
								// 判断是否有建设性质
								for (let j = 0; j < this.gyyt.length; j++) {
									if (this.gyyt[j].children.length != 0) {
										this.xmxz = this.gyyt[j].children
									}
								}
							}
						}
					}
				})

			},
			submit(data) {
				data.purposeName = ''
				data.classificationName = ''
				if (data.project == '') {
					uni.showToast({
						title: '请输入项目名称',
						icon: 'none'
					})
				} else if (data.companyName == '') {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
				} else if (data.role == '') {
					uni.showToast({
						title: '请输入参与角色',
						icon: 'none'
					})
				} else if (data.startTime == '') {
					uni.showToast({
						title: '请选择工程开工时间',
						icon: 'none'
					})
				} else if (data.startTime != '') {
					if (this.compare(data.startTime, this.nowTime)) {
						uni.showToast({
							title: '项目业绩开工时间不能写未来的时间!',
							icon: 'none'
						})
					} else {
						if (data.endTime != null) {
							if (this.compare(data.startTime, data.endTime)) {
								uni.showToast({
									title: '项目业绩结束时间不能小于开始时间',
									icon: 'none'
								})
							} else {
								this.$myResquest.setCareerPut(data).then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: "操作成功"
										})
										setTimeout(() => {
											// 获取页面栈
											let pages = getCurrentPages()
											// 获取上一页栈
											let prevPage = pages[pages.length - 2]
											prevPage.$vm.test()
											uni.navigateBack()
										}, 1000)
									} else {
										uni.showToast({
											title: "操作失败",
											icon: "none"
										})
									}
								})
							}
						} else {
							this.$myResquest.setCareerPut(data).then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: "操作成功"
									})
									setTimeout(() => {
										// 获取页面栈
										let pages = getCurrentPages()
										// 获取上一页栈
										let prevPage = pages[pages.length - 2]
										prevPage.$vm.test()
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: "操作失败",
										icon: "none"
									})
								}
							})
						}

					}
				}


			},
			// 日期校验
			compare(date1, date2) {
				let dates1 = new Date(date1);
				let dates2 = new Date(date2);
				if (dates1 > dates2) {
					return true
				} else {
					return false
				}
			},
			// 获取选择传过来的值
			getChild(child) {
				// this.TJformChange.cert = child
				this.dataMain.classification = child
			},
			joinChange(e) {
				this.joinPlac = 1
				this.joinIndex = e.target.value
			},
			protecChange(e) {
				this.dataMain.classification = ''
				this.dataMain.purpose = ''
				this.protectPlac = 1
				// 默认工业用途为第一个
				this.protectIndex = e.target.value
				console.log(this.protectClass[this.protectIndex].children.length)
				// 判断是否有子集
				if (this.protectClass[this.protectIndex].children.length != 0) {
					// 把当前子集赋给工业用途
					this.gyyt = this.protectClass[this.protectIndex].children
				} else {
					this.gyyt = ''
				}
				// 切换项目分类时工业用途默认为第一项
				//提交表单，把enumValue传给后端
				this.dataMain.classification = this.protectClass[this.protectIndex].code
			},
			gyytChange(e) {
				this.dataMain.purpose = ''
				this.dataMain.nature = ''
				this.gyytPlac = 1
				this.gyytIndex = e.target.value
				// 把当前子集赋给建设性质
				this.xmxz = this.gyyt[this.gyytIndex].children
				//提交表单，把enumValue传给后端
				this.dataMain.purpose = this.gyyt[this.gyytIndex].code
			},
			xmxzChange(e) {
				this.xmxzPlac = 1
				this.xmxzIndex = e.target.value
				//提交表单，把enumValue传给后端
				this.dataMain.nature = this.xmxz[this.xmxzIndex].enumValue
			},

			bindDateChangeStr: function(e) {
				this.dataMain.startTime = e.target.value
				this.timeIndexStart = 1
			},
			bindDateChangeEnd: function(e) {
				this.dataMain.endTime = e.target.value
				this.timeIndexEnd = 1
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.activeFalse {
		color: #000000;
	}

	.activeTrue {
		color: red;
	}

	.nav_top {
		background: #eeeeef;
	}

	.addWordExp {
		width: 100%;
		height: 100%;
		background: #f7f7f7;
		margin-top: 10rpx;

		.addWordExp_list {
			height: 136rpx;
			margin: 11rpx auto;
			background: #ffffff;
			padding: 25rpx 60rpx;

			>view {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 35rpx;
			}

			>input,
			>textarea {
				padding: 10rpx;
				box-sizing: content-box;
			}

			>textarea {
				height: 150rpx;
				width: 670rpx;
			}

			.addWordExp_list_time {
				.addWordExp_list_data {
					padding: 15rpx;
					box-sizing: border-box;

					>view {
						width: 30%;
						text-align: left;
					}
				}
			}

			.addWordExp_list_juese {
				height: 75rpx;

				image {
					width: 22rpx;
					height: 22rpx;
				}

				picker {
					width: 645rpx;
					padding-left: 15rpx;
				}
			}

			.addWordExp_list_tit {
				color: #49B3AF;
			}
		}

		.text_list {
			height: 280rpx !important;
		}

		.addWordExp_list_btn {
			width: 600rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #5cd1ce;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #ffffff;
			margin: 20rpx auto;
		}

		.del {
			background: #999999;
		}
	}

	.commonColor {
		color: #d4d6e1;
	}
</style>
